<template>
  <el-dialog :title="titleFront + '节点'" :visible.sync="show" append-to-body width="50%" :before-close="handleClose">
    <el-form :model="formInline">
      <el-form-item label="名称">
        <el-input :disabled="formInline.type !== 'add'" v-model="formInline.name" placeholder="请输入节点名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addTagProp">新增属性</el-button>
      </el-form-item>
    </el-form>

    <el-table  :data="tagProperties">
      <el-table-column label="序号" width="50">
        <template v-slot="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="属性名">
        <template v-slot="scope">
          <el-input v-model="scope.row.tagProps"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="默认值">
        <template v-slot="scope">
          <el-input v-model="scope.row.defaultValue"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300px">
        <template v-slot="scope">
          <div v-if="scope.row.isNew !== 2 && scope.row.isNew !== 1">
            <el-button class="common-btn" @click="editProp(scope.row)">修改</el-button>
            <el-button class="delete-btn" @click="deleteProp(scope.row)">删除</el-button>
          </div>
          <div v-if="scope.row.isNew === 1">
            <el-button class="common-btn" @click="addProp(scope.row)">保存</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="checkBtn">确 认</el-button>
      <el-button @click="handleClose">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {formatDate} from "@/utils/DateFormat"
import {addTag, showTagProperty, delTagProp, uptTagProp, addTagProp } from "../../../../api/fault/index"

export default {
  props: ['ModelDialogShow', 'modelParam'], //接受父组件传递过来的数据
  data() {
    return {
      show: false, //弹窗默认隐藏
      tagList: [],
      edgeList: [],
      formInline: {

      },
      tagProperties: [],
      titleFront: '查看'
    };
  },
  mounted() {
    this.formInline = JSON.parse(JSON.stringify(this.modelParam))
    this.getInit()
    //显示弹窗
    if (this.formInline.type === 'add') {
      this.titleFront = '新建'
    } else if (this.formInline.type === 'edit') {
      this.titleFront = '编辑'
    }
    this.show = this.ModelDialogShow
  },
  methods: {
    formatTime(date) {
      return formatDate("YYYY-mm-dd HH:MM:SS", date)
    },
    handleClose() {
      //关闭弹窗
      this.show = false
      this.$emit('closeDialog')
    },
    checkBtn() {
      //确定按钮
      let data = {
        tagName: this.formInline.name,
        propsList: this.tagProperties.map((r)=> {
          r.tagType = "string"
          return r
        })
      }
      if (this.formInline.type === 'add') {
        addTag(data).then((res) => {
          if (res.code === 200){
            this.$message({
              message: "创建成功",
              type: "success",
            });
            this.handleClose()
          }else {
            this.$message.error('创建失败：' + res.msg);
          }
        })
      }else {
        this.handleClose()
      }
    },
    getInit() {
      if (this.formInline.type === 'edit') {
        showTagProperty(this.formInline.name).then((res) => {
          if (res) {
            this.tagProperties = res.data
          }
        })
      }
    },
    addTagProp() {
      if (this.formInline.type === 'edit') {
        this.tagProperties.push({
          isNew : 1,
          tagType : "string"
        })
      }else {
        this.tagProperties.push({
          isNew : 2,
          tagType : "string"
        })
      }
    },
    editProp(row) {
      uptTagProp({
        "tagName": this.formInline.name,
        "propsList": [
          row
        ]
      }).then((res) => {
        if (res && res.code === 200) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
        }else {
          this.$message.error('修改失败');
        }
        this.getInit()
      })
    },
    deleteProp(row) {
      delTagProp({
        "tagName": this.formInline.name,
        "propsList": [
          row
        ]
      }).then((res) => {
        if (res && res.code === 200) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
        }else {
          this.$message.error('删除失败');
        }
        this.getInit()
      })
    },
    addProp(row) {
      addTagProp({
        "tagName": this.formInline.name,
        "propsList": [
          row
        ]
      }).then((res) => {
        if (res && res.code === 200) {
          this.$message({
            message: "新增成功",
            type: "success",
          });
        }else {
          this.$message.error('新增失败');
        }
        this.getInit()
      })
    },
  }
};
</script>

<style scoped>

</style>
